<template>
  <div class="book_shelf">
    <div class="top_nav">
      <div class="nav">
        <div class="nav_text">
          <span> 书架</span>
          <div class="icon_arrow">
            <span class="iconfont icon-xiajiantou"></span>
          </div>
        </div>
        <div class="icon">
          <span
            class="iconfont icon-Magnifier"
            @click="showSearch = true"
          ></span>
          <span
            class="iconfont icon-shijian"
            @click="showHistory = true"
          ></span>
          <span class="iconfont icon-liebiao2"></span>
        </div>
      </div>
    </div>
    <!-- 搜索页面 -->
    <search-com
      v-if="showSearch"
      @change-search-show="closeSearch"
    ></search-com>

    <!-- 历史记录 -->
    <history-com
      v-if="showHistory"
      @update-show-history="closeHistory"
    ></history-com>
    <!-- 每日推荐广告 -->
    <div class="substance-header" v-if="bookAdv">
      <div class="header-left">
        <img :src="bookAdv.cover" alt="" />
      </div>

      <div class="header-right">
        <div class="header-right-top">
          <div class="header-right-top-left">{{ bookAdv.title }}</div>
          <div class="header-right-top-right">
            <div class="text">{{ bookAdv.readInfo }}</div>
            <div class="btn">
              <span
                @click="deleteAdv"
                class="iconfont icon-cuowuguanbiquxiao"
              ></span>
            </div>
          </div>
        </div>

        <div class="header-right-bottom">
          <div class="wenzi">
            {{ bookAdv.description }}
          </div>
        </div>
      </div>
    </div>

    <div class="shelf" v-if="bookShelf">
      <ul>
        <router-link
          tag="li"
          :to="{
            name: 'comment',
            query: { id: book.id, title: book.title },
          }"
          v-for="book in bookShelf"
          :key="book.id"
        >
          <div class="img"><img :src="book.cover" alt="" /></div>
          <div class="book_name">
            <p>{{ book.title }}</p>
          </div>
        </router-link>
      </ul>
    </div>
  </div>
</template>
<script>
import { getBookShelf, getBookShelfAdv } from "../../api/bookshelf";
import SearchCom from "../../components/common/SearchCom.vue";
import HistoryCom from "./HistoryCom.vue";
export default {
  components: { SearchCom, HistoryCom },
  data() {
    return {
      showHistory: false,
      showSearch: false,
      bookShelf: null,
      bookAdv: null,
      showAdv: true,
    };
  },
  created() {
    this.getBookShelfFun();
    this.getBookShelfAdvFun();
  },
  methods: {
    getBookShelfFun() {
      getBookShelf()
        .then(({ data: res }) => {
          console.log(res);
          this.bookShelf = res.data.list;
        })
        .catch((error) => {
            if (error) {
            this.$toast({
              message: "服务器崩溃了",
              position: "middle",
            });
          }
        });
    },
    getBookShelfAdvFun() {
      getBookShelfAdv()
        .then(({ data: res }) => {
          console.log(res);
          this.bookAdv = res.data.banners[0];
        })
        .catch((error) => {
            if (error) {
            this.$toast({
              message: "服务器崩溃了",
              position: "middle",
            });
          }
        });
    },
    deleteAdv() {
      this.showAdv = false;
    },
    closeSearch(event) {
      this.showSearch = event;
    },
    closeHistory(event) {
      console.log(event);
      this.showHistory = event;
    },
  },
};
</script>

<style lang="less" scoped>
.book_shelf {
  height: 100%;
  // padding-bottom: 10px;
  .top_nav {
    // background-color: #fff;
    padding: 0 13px 0 13px;
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 50px;
      .nav_text {
        display: flex;
        justify-content: flex-start;
        .icon_arrow {
          color: #706e6b;
          font-size: 12px;
          transform: scale(0.5);
        }
      }
      .icon {
        width: 70px;
        display: flex;
        height: 50px;
        align-items: center;
        justify-content: space-around;
        .iconfont {
          color: #706e6b;
          font-size: 15px;
        }
      }
    }
  }

  .substance-header {
    font-size: 12px;
    width: 345px;
    height: 80px;
    padding: 0px 10px;
    margin: 10px auto;
    border: 1px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .header-left {
      img {
        height: 60px;
        line-height: 80px;
        margin-top: 10px;
      }
    }
    .header-right {
      margin-top: 10px;
      margin-left: 10px;
      width: 290px;
      position: relative;
      .header-right-top {
        display: flex;
        justify-content: space-between;
        .text {
          color: red;
        }
        .btn {
          position: absolute;
          top: -15px;
          right: 0;
          margin-left: 5px;
          span {
            font-size: 12px;
            color: red;
          }
        }
      }
      .header-right-bottom {
        .wenzi {
          display: -webkit-box;
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          line-height: 20px;
          color: #ccc;
        }
      }
    }
  }
  .shelf {
    width: 100%;
    // padding: 0 14px;
    ul {
      display: flex;
      flex-wrap: wrap;
      // & li:nth-of-type(3n) {
      //   margin-right: 0;
      // }
      li {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 33%;
        height: 200px;
        // margin-right: 23px;
        .img {
          width: 100px;
          height: 140px;
          margin: 0 auto;
          box-shadow: 3px 2px 8px -3px #706e6b;
          img {
            width: 100px;
            height: 140px;
            border-radius: 5px;
          }
        }
        .book_name {
          // width: 100%;
          margin: 0 auto;
          p {
            font-size: 13px;
            color: #000000;
            width: 100px;
            white-space: word-break;
            height: 25px;
          }
          span {
            font-size: 12px;
            color: #d4d4d4;
          }
        }
      }
    }
  }
}
</style>